<template>
  <div class="iframe">
    <div class="i-title">
    <h3>侦听模板引用</h3>
    </div>
    <div class="i-tip" ref="root" id="my">{{tip2}}</div>
    <div class="i-tip">
       {{str}}
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
export default {
  name: "hello",
  setup() {
    const root = ref(null);
    let str = ref("");
    let tip2 = ref("今天是一个好天气");
    onMounted(() => {
      // DOM 元素将在初始渲染后分配给 ref
      console.log(root.value, "初始内容");
      str.value = root.value.innerHTML + " , " + root.value.id;
    })

    watch(tip2, (newValue, oldValue) => {
      str.value = newValue + " , " + root.value.id;
    })
    
    setTimeout(() => {
      tip2.value = "明天可能会下雨"
    }, 2000)

    return {
      root,
      str,
      tip2
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
